// 板块行情
<template>
  <div class="page-box h100 display-flex czbj">
    <n-data-table
      size="small"
      class="mt10"
      :max-height="800"
      :row-class-name="rowClassName"
      :pagination="paginationReactive"
      :columns="columns"
      :data="tableData"
      :single-line="false"
      :row-props="rowProps"
      remote
      @update:page="handlePageChange"
    />

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>{{ pupTitle }}相关个股</div>
      </template>
      <div>
        <relatedStocks :BK="BK"></relatedStocks>
      </div>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { h, ref, computed, reactive } from "vue";
import { getTheMarket } from "../../util/dxjsonp";
import relatedStocks from "../../components/ThePlateMarket/relatedStocks";
const paginationReactive = reactive({
  page: 1,
  pageCount: 1,
  pageSize: 20,
});
let showModal = ref(false);
let tableData = ref([]);
let BK = ref("");
let pupTitle = ref("");
let columns = [
  {
    title: "名称",
    key: "f14",
    align: "center",
  },
  {
    title: "涨幅",
    key: "f3",
    align: "center",
    render(row) {
      return row.f3 + "%";
    },
  },
  {
    title: "3日涨幅",
    key: "f127",
    align: "center",
    render(row) {
      return row.f127 + "%";
    },
  },
  {
    title: "领涨股",
    key: "f128",
    align: "center",
  },
  {
    title: "涨跌家数",
    key: "",
    align: "center",
    render(row) {
      return row.f104 + "/" + row.f105;
    },
  },
  {
    title: "涨速",
    key: "f22",
    align: "center",
    render(row) {
      return row.f22.toFixed(2) + "%";
    },
  },
  {
    title: "金额",
    key: "",
    align: "center",
    render(row) {
      return (row.f6 / 100000000).toFixed(2) + "亿";
    },
  },
  {
    title: "总手",
    key: "",
    align: "center",
    render(row) {
      return (row.f5 / 10000).toFixed(2) + "万";
    },
  },
  {
    title: "最新",
    key: "f2",
    align: "center",
  },
  {
    title: "换手",
    key: "",
    align: "center",
    render(h) {
      return h.f8 + "%";
    },
  },
  {
    title: "量比",
    key: "f10",
    align: "center",
  },
  {
    title: "振幅",
    key: "",
    align: "center",
    render(h) {
      return h.f7 + "%";
    },
  },
  {
    title: "今年涨幅",
    key: "",
    align: "center",
    render(h) {
      return h.f25 + "%";
    },
  },
  {
    title: "总市值",
    key: "",
    align: "center",
    render(h) {
      return (h.f20 / 1000000000000).toFixed(2) + "万亿";
    },
  },
  {
    title: "流通市值",
    key: "",
    align: "center",
    render(h) {
      return (h.f21 / 1000000000000).toFixed(2) + "万亿";
    },
  },
];
const initData = async () => {
  let { diff, total }: any = await getTheMarket(paginationReactive.page);
  tableData.value = diff;
  let totals = parseInt("" + total / 20);
  paginationReactive.pageCount = totals + 1;
  console.log(diff);
};
initData();
const handlePageChange = (page) => {
  paginationReactive.page = page;
  initData();
};
const rowClassName = (row, index) => {
  if (row.f3 >= 0) {
    return "red";
  }
  return "ls";
};
const rowProps = (row, aa) => {
  return {
    style: "cursor: pointer;",
    onClick: (idx) => {
      BK.value = row.f12;
      pupTitle.value = row.f14;
      showModal.value = true;
    },
  };
};
</script>
 <style scoped>
</style>